<script setup name="MyTreeList">
import { ref, reactive, onMounted } from "vue";

const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
});
const defaultProps = {
  children: "children",
  label: "label",
  class: "tree_node",
};
const nowNodeId = ref(null);

const handleNodeClick = (data) => {
  console.log(data);
  nowNodeId.value = data.id;
};
</script>

<template>
  <div class="tree_outer">
    <el-tree
      class="tree"
      :data="data"
      node-key="id"
      default-expand-all
      :props="defaultProps"
      @node-click="handleNodeClick">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <el-dropdown trigger="hover">
            <span class="point_three">
              <!-- 三个圆点 -->
              ...
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item class="options">
                  <img
                    @click.native=""
                    src="@/assets/images/edit.png"
                    alt="编辑" />
                  <img
                    @click.native=""
                    src="@/assets/images/plus.png"
                    alt="新增" />
                  <img
                    @click.native=""
                    src="@/assets/images/delete.png"
                    alt="删除" />
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<style lang="scss">
.el-popper {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-radius: 10px;
}

.el-dropdown-menu {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 0;
  border-radius: 10px;
}
.el-popper__arrow {
  display: none;
}
.options {
  background-color: rgba(255, 255, 255, 0.05) !important;
  width: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px;
  img {
    width: 18px;
    height: 18px;
    margin: 0 3px;
  }
}
.is-current {
  > .el-tree-node__content {
    background-color: rgba(0, 196, 116, 0.1) !important;
    color: rgba(0, 196, 116, 1) !important;
    .point_three {
      color: rgba(0, 196, 116, 1) !important;
    }
  }
}
</style>
<style scoped lang="scss">
.tree_outer {
  width: 230px;
  height: 80vh;
  .tree {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 10px 0px 10px 0px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
  }
  .custom-tree-node {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .point_three {
    color: rgba(255, 255, 255, 0.6);
    display: none;
    transform: rotateZ(90deg);
  }
  :deep(.el-tree-node__content) {
    position: relative;
    color: rgba(255, 255, 255, 0.6);
  }
  :deep(.el-tree-node__content):hover .point_three {
    display: inline-block;
  }
  :deep(.el-tree-node__content):hover {
    background-color: rgba(0, 196, 116, 0.1);
  }
}
</style>
